<template>
  <div>
      <div class="center">
        <el-button type='primary' @click="outerVisible = true">添加规格参数</el-button>
      </div>
      <!-- 弹出框 -->
       <el-dialog 
          title="添加规格参数" 
          :visible.sync="outerVisible"
          width='80%'
        >
          <el-dialog
            width="60%"
            title="添加分组"
            :visible.sync="innerVisible"
            append-to-body
          >
            <DyanForm
              :cid='cid'
              @close='close'
            />
          </el-dialog>
          <productTree @getleimu='getName'/>
          <el-button type="primary" @click="outerVisible = false">取消</el-button>
          <el-button type="primary" @click="innerVisible = true">确认并分组</el-button>
        </el-dialog>
      <!-- 列表展示 -->
      <el-table :data="paramsList" style="width: 100%">
          <el-table-column prop="id" label="规格参数id" width="150"></el-table-column>
          <el-table-column prop="itemCatId" label="分类ID" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="paramData" label="规格参数结构"  show-overflow-tooltip></el-table-column>
          <el-table-column  label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="danger" @click="shanchu(scope.row)" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
  </div>
</template>

<script>
import productTree from '../Home/productTree'
import DyanForm from './DyanForm'
export default {
    name:'Params',
    data(){
      return{
        curPage:1,
        paramsList:[],
        outerVisible:false,
        innerVisible:false,
        cid:''
      }
    },
    mounted(){
      this.getdata(this.curPage)
    },
    components:{
      productTree,
      DyanForm
    },
    methods:{
      //添加规格参数成功后，关闭对话框，刷新数据
      close(){
        this.outerVisible=false;
        this.innerVisible=false;
        this.getdata(1)
      },
      shanchu(row){
        console.log(row)
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$api.getDeleteItemParamById({id:row.id})
            .then(data=>{
              console.log(data)
              if(data.status==200){
                this.getdata(this.curPage)
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }else{
                this.$message({
                  type: 'error',
                  message: '删除失败!'
                });
              }
                
            })
            
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
      },
      getdata(page){
        this.$api.getSelectItemParamAll({page})
        .then(data=>{
          console.log(data)
          if(data.status==200){
            this.paramsList=data.data.result
          }
        })
      },
      getName(data){
        console.log(data)
        this.cid=data.cid
      }
    }
}
</script>

<style scoped>
.center{
  margin: 10px 0;
  text-align: center;
}
</style>